
<script setup>
	
	import { ref, getCurrentInstance } from 'vue';
	import useFunction from '../hook/useFunction';
	import useWordHeight from '../hook/useWordHeight';
	
	
	/** 工具函数 */
	const toolFunction = useFunction();
	
	/** 当前组件实例 */
	const { proxy } = getCurrentInstance();
	
	/** 计算容器高度 */
	const wordHeight = useWordHeight({ proxy });
	
	/** 获取节点 */
	const view = ref({});
	wordHeight.get(result => view.value = result);
	
	/** props */
	const props = defineProps({
		item: Object,
		index: Number,
		color: Boolean,
		iteration: {
			type: Number,
			default: 1
		}
	});

	/** emits */
	const emits = defineEmits(['play', 'join']);
	
	
	/** click */
	function itemClick() {
		emits('play')
	};

	
	/** 是否点击 */
	const isCheck = ref(0);

	/** 加入词汇防抖 */
	const debounceHandleJoinEvent = toolFunction.debounce(handleJoinEvent, 300);
	
	/** 加入词汇 */
	function handleJoinEvent(data){
		if(props.iteration === 3){
			if(data === isCheck.value){
				isCheck.value = 0;
				
			} else {
				isCheck.value = data;
			};
		};
		
		emits('join', data);
	};
	
	
</script>

<template>
	<view class="items-view flex items-center" @tap="itemClick">
		<view class="flex-1 items-word min-w-0" v-if="!view.viewHeight">
			<view class="line-1 text-30 pt-6 hidden-block-translation">{{ item.translation.includes('(') ? item.translation : `${item.translation}` }}</view>
			<view class="line-1">{{ item.word }}</view>
		</view>
		
		<view class="flex-1 min-w-0 items-word" v-else :style="{ height: `${wordHeight.calculatedHeight(item.blockTranslation, view.viewHeight, view.translationHeight)}px` }">
			<view class="flex items-center">
				<view class="line-1 flex-1">{{ item.word }}</view>
				<view class="mp3icon" v-if="item.play">
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
				</view>
			</view>
			
			<uv-transition v-if="item.blockTranslation" :show="item.blockTranslation">
				<view class="line-1 flex-1 pt-6">{{ item.translation }}</view>
			</uv-transition>
		</view>
		
		<view class="flex items-center" v-if="iteration === 3">
			<view class="icon" :class="{ correct: isCheck === 1 || color }" @tap.stop="debounceHandleJoinEvent(1)"><uv-icon class="flex" name="arrow-leftward" size="28rpx" color="#fff" /></view>
			<view class="icon" :class="{error: isCheck === 2|| color }" @tap.stop="debounceHandleJoinEvent(2)"><uv-icon class="flex" name="arrow-rightward" size="28rpx" color="#fff" /></view>
		</view>
		
		<view class="flex items-center" v-else>
			<view class="icon" :class="{ correct: color }" @tap.stop="debounceHandleJoinEvent(1)"><uv-icon class="flex" name="arrow-leftward" size="28rpx" color="#fff" /></view>
			<view class="icon" :class="{ error: color }" v-if="iteration === 2" @tap.stop="debounceHandleJoinEvent(2)"><uv-icon class="flex" name="arrow-rightward" size="28rpx" color="#fff" /></view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	@import "../style/common.scss";
	.icon.color{background-color: #40d463}
	.icon.color:last-child{background-color: #ff5252}
</style>
